<template>
  <div class="container">
    <a-row class="card card1">
      <a-col :span="12">
        <a-card class="card card1" :bordered="false" title="弹幕配置" style="height:500px;">
          <a-form-model :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }" style="width:800px;" layout="inline" >
            <a-form-model-item label="输入配置名" style="display:flex;">
              <div style="position: relative;">
                <a-input v-model="configName" placeholder="输入配置名"/>
                <a-button type="primary" @click="saveConfig" class="saveConfigBtn">保存新配置</a-button>
              </div>
            </a-form-model-item>
          </a-form-model>
          <standard-table
            :loading='configListloading'
            rowKey="name"
            :columns="columns"
            :dataSource="configList"
            :pagination="{showTotal:total => `共 ${total} 个计划`,pageSize:5}"
          >
            <div slot="action" slot-scope="{record}" >
              <a style="margin-right: 8px" @click="outputConfig(record.name)" href="javascript:;">
                <a-icon type="edit"/>使用配置
              </a>
              <a style="margin-right: 8px" href="javascript:;" @click="baocunConfig(record.name)">
                <a-icon type="save"/>保存配置
              </a>
              <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm='deleteRecord(record.name)'>
                <a href="javascript:;">
                  <a-icon type="delete" />删除
                </a>
              </a-popconfirm>
            </div>
          </standard-table>
        </a-card>
      </a-col>
      <a-col :span="12" style="padding-left:20px;">
        <a-card class="card card1" :bordered="false" title="在线直播间" style="height:500px;">
          <standard-table
            rowKey="url"
            :columns="columns_danmu"
            :dataSource="zhibojianList"
            :pagination="false"
            :loading="zaixianLoading"
          >
            <div slot="action" slot-scope="{record}" >
              <a-popconfirm title="确定关闭？" ok-text="关闭" cancel-text="取消" @confirm='closeDanmu(record.url)'>
                <a href="javascript:;">
                  <a-icon type="delete" />关闭弹幕
                </a>
              </a-popconfirm>
            </div>
          </standard-table>
        </a-card>
      </a-col>
    </a-row>
    <a-card class="card card1" :bordered="false" title="连接直播间" >
      <a-row type="flex">
        <a-col :span="20">
          <a-input class="input" v-model="url" placeholder="直播间地址"/>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="getRoomInfo" style="margin-left:20px" :loading="getInfoLoading">连接直播间</a-button>
        </a-col>
      </a-row>
      <a-row type="flex">
        <m-textline :values="bduss" title="百度BDUSS账号" @change="changeTextLine" />
        <div class="roomeInfo">
          <div class="logo">
            <img v-if="info.logo != ''" :src="info.logo" alt="">
          </div>
          <div class="roomName">{{info.roomName}}</div>
        </div>
      </a-row>
    </a-card>
    <a-card class="card card1" :bordered="false" title="发送弹幕" >
      <a-row type="flex">
        <a-col :span="11">
          <m-textline :values="danmu" title="发送弹幕" @change="changeDanmuLine" />
        </a-col>
        <a-col :span="11">
          <m-textline :values="huifuDanmu" title="回复弹幕" @change="changeHuifuDanmuLine" />
        </a-col>
      </a-row>
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" style="width:800px;">
        <a-form-model-item label="开启回复">
          <a-switch v-model="huifu" />
        </a-form-model-item>
        <a-form-model-item label="BDUSS账号" v-if="huifu" :label-col="{ span: 3 }" :wrapper-col="{ span: 14 }">
          <a-input class="input" v-model="huifuBduss" placeholder="回复BDUSS账号"/> 
          <div>需要主播最新BDUSS账号</div>
        </a-form-model-item>
        <!-- </a-form-model-item>
        <a-form-model-item label="智能回复" :label-col="{ span: 3 }" v-if="huifu" >
          <a-switch v-model="isZhineng" />
        </a-form-model-item>
        <a-form-model-item label="选择产品" :label-col="{ span: 3 }" v-if="huifu&&isZhineng" >
          <a-select style="width: 200px" v-model="product_id">
            <a-select-option :value="item.id" v-for="(item,index) in productList" :key="index">
              {{item.desc}}
            </a-select-option>
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item label="循环次数">
          <a-input v-model="baseDanmu.loop" />
        </a-form-model-item>
        <a-form-model-item label="时间间隔" >
          <div style="display:flex;align-items: center;">
            <a-input v-model="baseDanmu.minTime" /> - <a-input v-model="baseDanmu.maxTime" />
          </div>
        </a-form-model-item>
      </a-form-model>
      <a-button type="primary" @click="sendDanmu" :loading="danmuLoading" >{{danmuLoading?'添加中':'添加弹幕队列'}}</a-button>
      <!-- <a-button type="danger" @click="stopDanmu" :loading="stopDanmuLoading" v-else>{{'关闭弹幕'}}</a-button> -->
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '配置名',
    dataIndex: 'name',
  },
  {
    title: '操作',
    width:300,
    scopedSlots: { customRender: 'action' }
  }
]
const columns_danmu = [
  {
    title: '直播间地址',
    dataIndex: 'url',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]
import StandardTable from '@/components/table/StandardTable'
import { getRoomInfo,loginBaidu,sendDanmu,stopDanmu,saveConfig,getConfigList,getConfigDetail,delConfig,exit,getDanmuList,getProductList } from '@/api/zhibo/baidu'
export default {
  name:'shuijunBaidu',
  data() {
    return {
      configName:'',
      info:{
        logo:'',
        roomName:'请登录直播间'
      },
      getInfoLoading:false,
      baseDanmu:{},
      stopDanmuLoading:false,
      huifuBduss:'',
      huifu:true,
      isZhineng:true,
      product_id:'1',

      productList:[],
      zhibojianList:[],
      zaixianLoading:false,

      configList:[],
      configListloading:false,
      columns:columns,
      columns_danmu:columns_danmu,

      url:'',
      bduss:[],
      danmu:[],
      huifuDanmu:[],
      genxingTime:10,
      setLoading:false,
      exitLoading:false,
      isSet:false,
      danmuLoading:false,
      labelCol: { span: 2 },
      wrapperCol: { span: 4 },
    }
  },
  created(){
    console.log('created')
    this.getConfigList()
    this.getDanmuList()
    if(this.huifu){
      // this.getProductList()
    }
  },
  mounted(){
    // window.onbeforeunload = async () => {
    //   await this.stopDanmu()
    // }
  },
  methods:{
    getRoomInfo(){
      this.getInfoLoading = true
      let params = {
        url: this.url,
        bduss: this.bduss
      }
      getRoomInfo(params).then((res) => {
        console.log(res)
        this.getInfoLoading = false
        if(res.errcode == 200){
          this.info = res.data
        }
      }).catch(()=>{
        this.getInfoLoading = false
      });
    },
    getProductList(){
      getProductList({}).then(res=>{
        console.log(res)
        if(res.errcode == 200){   
          this.productList = res.data
        }
      })
    },
    sendDanmu(){
      this.danmuLoading = true
      this.stopDanmuLoading = false
      let params = {
        url: this.url,
        bduss: this.bduss,
        danmu:this.danmu,
        huifuDanmu:this.huifuDanmu,
        huifuBduss:this.huifuBduss,
        huifu:this.huifu,
        // isZhineng:this.isZhineng,
        ...this.baseDanmu
      }
      sendDanmu(params).then(() => {
        this.danmuLoading = false
        this.getDanmuList()
      }).catch(()=>{
        this.danmuLoading = false
      });
    },
    closeDanmu(url){
      this.zaixianLoading = true
      return new Promise((resolve) => {
        let params = {
          url,
        }
        this.stopDanmuLoading = true
        stopDanmu(params).then(() => {
          this.getDanmuList()
          resolve()
        }).catch(() => {
          this.zaixianLoading = false
          resolve()
        });
      });
    },
    stopDanmu(){
      return new Promise((resolve) => {
        let params = {
          url:this.url,
        }
        this.stopDanmuLoading = true
        stopDanmu(params).then(() => {
          this.stopDanmuLoading = false
          this.danmuLoading = false
          resolve()
        }).catch(() => {
          this.stopDanmuLoading = false
          resolve()
        });
      });
    },
    getConfigList(){
      this.configListloading = true
      getConfigList({}).then((res) => {
        console.log(res)
        this.configListloading = false
        if(res.errcode == 200){
          this.configList = res.data
        }
      }).catch(() => {
        this.configListloading = false
      });
    },
    getDanmuList(){
      this.zaixianLoading = true
      getDanmuList({}).then((res)=>{
        console.log(res)
        this.zaixianLoading = false
        if(res.errcode == 200){
          this.zhibojianList = res.data
        }
      }).catch(()=>{
        this.zaixianLoading = false
      })
    },
    outputConfig(configName){
      getConfigDetail({configName}).then((res) => {
        console.log(res)
        if(res.errcode == 200){
          this.stopDanmuLoading = false
          this.danmuLoading = false

          this.url = res.data.url
          this.bduss = res.data.bduss
          this.danmu = res.data.danmu
          this.huifu = res.data.huifu,
          this.huifuDanmu = res.data.huifuDanmu,
          this.huifuBduss = res.data.huifuBduss,
          this.baseDanmu = {
            loop: res.data.loop,
            maxTime: res.data.maxTime,
            minTime: res.data.minTime
          }
        }
      }).catch(() => {
        
      });
    },
    baocunConfig(name){
      this.configName = name.split('.')[0]
      this.saveConfig()
    },
    saveConfig(){
      let params = {
        configName:this.configName,
        url: this.url,
        bduss: this.bduss,
        danmu:this.danmu,
        huifu:this.huifu,
        huifuDanmu:this.huifuDanmu,
        huifuBduss:this.huifuBduss,
        ...this.baseDanmu
      }
      console.log(params)
      saveConfig(params).then((res) => {
        if(res.errcode == 200){
          this.getConfigList()
        }
      }).catch(() => {
        
      });
    },
    deleteRecord(name){
      delConfig({configName:name}).then((res) => {
        if(res.errcode == 200){
          this.$message.success('删除成功')
          this.getConfigList()
        }
      });
    },
    login(){
      this.setLoading = true
      let params = {
        url:this.url,
        bduss:this.bduss,
        genxingTime:this.genxingTime
      }
      loginBaidu(params).then((res) => {
        console.log(res)
        this.setLoading = false
        if(res.errcode == 200){
          this.isSet = true
        }
      }).catch(()=>{
        this.setLoading = false
      });
    },
    goExit(){
      this.exitLoading = true
      exit().then((res)=>{
        console.log(res)
        this.exitLoading = false
        if(res.errcode == 200){
          this.isSet = false
          this.danmuLoading = false
        }
      })
    },
    changeDanmuLine(val){
      this.danmu = val
    },
    changeHuifuDanmuLine(val){
      this.huifuDanmu = val
    },
    changeTextLine(val){
      console.log(val)
      let arr = []
      for(let i of val){
        if(i.slice(0,6) == 'BDUSS='){
          console.log(i,i.split('='))
          arr.push(i.slice(6))
        }
      }
      this.bduss = arr
      // this.bduss = val
    },
  },
  components:{
    StandardTable
  }
}
</script>

<style lang="less" scoped>
  .container{
    background-color: #eff1f4;
    padding: 20px;
    .input{
      margin-bottom: 20px;
    }
    .card{
      margin-bottom: 20px;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
    .roomeInfo{
      display: flex;
      margin-left: 20px;
      .logo{
        background-color: #f0f2f5;
        width: 100px;
        height: 100px;
        img{
          display: block;
          width: 100px;
          height: 100px;
        }
      }
      .roomName{
        margin-left: 20px;
        font-size: 18px;
        color: #222222;
      }
    }
    .saveConfigBtn{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(calc(100% + 20px),-50%);
    }
  }
</style>